<!--私信-->
<script setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {useStore} from "vuex";
import {useRoute} from "vue-router";
import Pagination from "@/components/common/Pagination.vue";
import UserLink from "@/components/common/link/UserLink.vue";
import Timestamp from "@/components/common/Timestamp.vue";
import {ElementUtils} from "@/assets/js/ElementUtils";
import {PrivateMessageStatus} from "@ginstone/nga-api/dist/src/enums/PrivateMessageStatus";
import MessageLink from "@/components/common/link/MessageLink.vue";
import {DomUtils} from "@/assets/js/DomUtils";

const store = useStore();
const route = useRoute();

//总数
const count = ref();
//总页数
const maxPage = ref();
//分页数据
const pageData = ref();
// 私信会话列表
const data = ref();


const pmList = (page, force) => {
  const loading = ElementUtils.loading({target: "#private_message",});
  return store.dispatch("Message/pmList", {page, force}).then(res => {
    const {hasNext, page, size} = res
    data.value = res.data;

    if (hasNext) {
      // 还有下一页
      if (count.value) {
        // count有值，说明已经看到过最后一页，使用
        pageData.value = {
          page, size, total: count.value, totalPage: maxPage.value
        }
      } else {
        // 还没看过最后一页，猜测下一页是最大页
        pageData.value = {
          page, size, total: (page + 1) * size, totalPage: page + 1
        }
      }
    } else {
      //没有下一页了，当前页就是最大页
      count.value = (page - 1) * size + res.data.length;
      maxPage.value = page;

      pageData.value = {
        page, size, total: count.value, totalPage: maxPage.value
      }
    }
  }).catch(ElementUtils.exceptionHandler).finally(() => {
    loading.close()
  });
}


onMounted(() => {
  DomUtils.scrollTop();
  nextTick(() => {
    pmList(route.query.page)
  })
})

watch(route, (nv) => {
  pmList(nv.query.page)
})

</script>

<template>
  <div id="private_message">
    <!--顶部按钮    -->
    <div class="space-between">
      <div>
        <pagination :data="pageData"/>
      </div>

      <div>
        <el-button size="small" type="success" @click="pmList($route.query.page,true)">刷新</el-button>
      </div>
    </div>
    <!--    私信列表-->
    <div>
      <el-table :data="data">
        <el-table-column label="#" width="40px">
          <template #default="s">
            {{ s.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="回复数" prop="postCount" width="80px"/>
        <el-table-column label="标题" prop="title">
          <template #default="{row}">
            <!--             会话跳转-->
            <message-link :message-id="row.messageId">{{ row.title }}</message-link>
            <!--             会话状态-->
            <el-tag v-if="row.status.includes(PrivateMessageStatus.MULTI)" class="status_tag">多人</el-tag>
            <el-tag v-if="row.status.includes(PrivateMessageStatus.UNREAD)" class="status_tag" type="danger">未读</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="发布" width="160px">
          <template #default="{row}">
            <span v-if="row.fromUid===0">[系统消息]</span>
            <user-link v-else :user-id="row.fromUid" :username="row.fromUsername">
              {{ row.fromUsername }}
            </user-link>
            <br>
            <timestamp :date="row.timeCreated"/>
          </template>
        </el-table-column>
        <el-table-column label="最后" width="160px">
          <template #default="{row}">
            <span v-if="row.fromUid===0">[系统消息]</span>
            <user-link v-else :user-id="row.lastReplyUid" :username="row.lastReplyUsername">
              {{ row.lastReplyUsername }}
            </user-link>
            <br>
            <timestamp :date="row.lastModify"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
#private_message {
  min-height: 300px;
}

.status_tag {
  margin-left: 5px;
}
</style>